<template>
  <div class="dashboard">
    <div class="top">

      <div class="todays">
        <div class="today-div">
          <svg-icon icon-class="post" />
          <div class="text">
            <h3>今日发帖总数</h3>
            <p>{{ todayPost }}</p>
          </div>
        </div>
        <div class="today-div">
          <svg-icon icon-class="postReply" />
          <div class="text">
            <h3>今日回复总额</h3>
            <p>{{ todayPostReply }}</p>
          </div>
        </div>
        <div class="today-div">
          <svg-icon icon-class="comment" />
          <div class="text">
            <h3>今日评论总数</h3>
            <p>{{ todayComment }}</p>
          </div>
        </div>
      </div>

      <div class="weeks">
        <div class="week-div">
          <h3>本周发帖总数</h3>
          <span>{{ Math.round(Math.random() * 1000) + todayPost }}</span>
          <p>同比上周:<mark class="good">+{{ Math.round(Math.random() * 10) }}%</mark></p>
        </div>
        <div class="week-div">
          <h3>本周回复总数</h3>
          <span>{{ Math.round(Math.random() * 1000) + todayPostReply }}</span>
          <p>同比上月:<mark class="bad">-{{ Math.round(Math.random() * 10) }}%</mark></p>
        </div>
        <div class="week-div">
          <h3>本周评论总数</h3>
          <span>{{ Math.round(Math.random() * 1000) + todayComment }}</span>
          <p>同比上周:<mark class="good">+{{ Math.round(Math.random() * 10) }}%</mark></p>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="left-echart">
        <el-form label-width="50px">
          <el-form-item label="日期">
            <el-date-picker
              type="date"
              :value="formatDate(new Date())"
              size="mini"
              disabled
              style="width: 100%;"
            />
          </el-form-item>
        </el-form>
        <div class="echart echart1" />
      </div>

      <div class="right-echart">
        <el-form label-width="50px">
          <el-form-item label="日期">
            <el-date-picker
              v-model="dateRange"
              class="datePick"
              type="daterange"
              size="mini"
              range-separator="至"
              :picker-options="pickerOptions"
              style="width: 100%;"
              @change="dateChange"
            />
          </el-form-item>
        </el-form>
        <div class="echart echart2" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { formatTimestamp } from '@/utils/dateUtil'
export default {
  name: 'Dashboard',
  data() {
    return {
      todayPost: Math.round(Math.random() * 550),
      todayPostReply: Math.round(Math.random() * 500),
      todayComment: Math.round(Math.random() * 700),
      dateRange: [new Date(2023, 4, 16), new Date(2023, 4, 22)],
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now() - 1000 * 60 * 60 * 24
        }
      }
    }
  },
  mounted() {
    this.echart1Init()
    this.echart2Init()
  },
  methods: {
    getEchartXData() {
      const startTime = this.dateRange[0].getTime()
      const endTime = this.dateRange[1].getTime()
      const xData = []
      for (let i = 0; startTime + 1000 * 60 * 60 * 24 * i <= endTime; i++) {
        xData.push(formatTimestamp(startTime + 1000 * 60 * 60 * 24 * i, '\n'))
      }
      return xData
    },
    dateChange() {
      const startTime = this.dateRange[0].getTime()
      const endTime = this.dateRange[1].getTime()
      if (endTime > startTime + 1000 * 60 * 60 * 24 * 6) {
        this.dateRange[1] = new Date(startTime + 1000 * 60 * 60 * 24 * 6)
      }
      this.echart2Init()
    },
    formatDate(date) {
      return date.getFullYear() + '-' + (date.getMonth() >= 10 ? date.getMonth() : '0' + date.getMonth()) + '-' + date.getDate()
    },
    echart2Init() {
      const echart = echarts.init(document.getElementsByClassName('echart2')[0])
      const data1 = []
      const data2 = []
      const data3 = []
      for (let index = 0; index < 7; index++) {
        data1.push(Math.round(Math.random() * 100))
        data2.push(Math.round(Math.random() * 100))
        data3.push(Math.round(Math.random() * 100))
      }
      const option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['订单数', '回复数', '评论数']
        },
        xAxis: {
          data: this.getEchartXData()
        },
        yAxis: [{}, {}, {}],
        series: [
          {
            name: '帖子数',
            type: 'bar',
            yAxisIndex: 0,
            data: data1
          },
          {
            name: '回复数',
            type: 'line',
            yAxisIndex: 1,
            data: data2
          },
          {
            name: '评论数',
            type: 'line',
            areaStyle: {},
            yAxisIndex: 1,
            data: data3
          }
        ]
      }
      echart.setOption(option)
      window.addEventListener('resize', echart.resize)
    },
    echart1Init() {
      const echart = echarts.init(document.getElementsByClassName('echart1')[0])
      const option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: ['发帖数', '回复数', '评论数']
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: this.todayPost,
                name: '发帖数'
              },
              {
                value: this.todayPostReply,
                name: '回复数'
              },
              {
                value: this.todayComment,
                name: '评论数'
              }
            ]
          }
        ]
      }
      echart.setOption(option)
      window.addEventListener('resize', echart.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  min-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
      display: flex;
      height: 100px;
      justify-content: space-between;
      .todays {
        background: #f7f7f7;
        width: 50%;
        display: flex;
        border: 1px solid rgb(208, 208, 208);
        box-shadow: 0 0 3px rgb(208, 208, 208);
        margin-right: 10px;
        .today-div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
        width: 48%;
        .svg-icon {
          font-size: 60px;
          margin: 0 10px;
        }
      }
      }
      .weeks {
        background: #f7f7f7;
        display: flex;
        width: 50%;
        border: 1px solid rgb(208, 208, 208);
        box-shadow: 0 0 3px rgb(208, 208, 208);
        .week-div {
          width: 33%;
          font-size: 14px;
          height: 100px;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
        p {
        color: #908e8e;
        mark {
          background-color: transparent;
        }
        .good {
          color: #0cc201;
        }
        .bad {
          color: #ea0000;
        }
      }
      }
    }
  }
  .content {
    margin-top: 10px;
    flex-grow: 1;
    display: flex;
    .left-echart {
      width: 50%;
      .echart1 {
        height: 85%;
      }
    }
    .right-echart {
      width: 50%;
      .echart2 {
        height: 85%;
      }
    }
  }
}
</style>
